<template>
  <!-- 对话框配置项: 关闭时销毁, 可拖拽, 居中-->
  <el-dialog
    v-model="dialogs.event.checking"
    title="审核交通事件"
    destroy-on-close
    @closed="dialogs.event.check = true"
    draggable
    center
    width="30%"
  >
    <el-form
      ref="formRef"
      :model="checkingForm"
      :rules="rules"
      class="demo-ruleForm"
      label-width="35%"
      status-icon
    >
      <el-form-item label="事件等级" prop="level">
        <el-select v-model="checkingForm.level" placeholder="请选择事件等级">
          <el-option label="一级" value="一级" />
          <el-option label="二级" value="二级" />
          <el-option label="三级" value="三级" />
          <el-option label="四级" value="四级" />
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态" prop="status">
        <el-select
          v-model="checkingForm.status"
          placeholder="请选择事件处理状态"
        >
          <el-option label="未处理" value="未处理" />
          <el-option label="处理中" value="处理中" />
          <el-option label="已处理" value="已处理" />
          <el-option label="已忽略" value="已忽略" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="审核状态" prop="check">
        <el-select
          v-model="checkingForm.check"
          placeholder="请选择事件审核状态"
        >
          <el-option label="完成审核" value="已审核" />
          <el-option label="取消审核" value="未审核" />
        </el-select>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClear">清空</el-button>
        <el-button type="primary" @click="handleSubmit(formRef)"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import eventApi from '@/apis/event.js' //导入封装好的API
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import { useEventStore } from '@/stores/event' // 使用pinia
import { useMapStore } from '@/stores/map' // 使用pinia
const { dialogs } = useDialogsStore()
const { event } = useEventStore()
const { map } = toRefs(useMapStore())

const formRef = ref()
// 表单输入数据
const checkingForm = reactive({
  level: '',
  status: '',
  check: '已审核'
})

// 表单验证规则
const rules = reactive({
  level: [
    {
      required: true,
      message: '事件等级不能为空!',
      trigger: 'change'
    }
  ],
  status: [
    {
      required: true,
      message: '处理状态不能为空!',
      trigger: 'change'
    }
  ],
  check: [
    {
      required: true,
      message: '审核状态不能为空!',
      trigger: 'change'
    }
  ]
})

// 清空表单
const handleClear = () => {
  for (const key in checkingForm) {
    checkingForm[key] = ''
  }
}
// 提交表单
const handleSubmit = (formEl) => {
  const submitData = {
    event_check: checkingForm.check,
    event_status: checkingForm.status,
    event_level: checkingForm.level
  }
  let id = event.checking.id
  let position = event.checking.location.split(',')
  let fidValue = [...Object.values(event.checking).slice(0, 8)]
  let fidNameAndType = {
    name: [
      '事件编号',
      '事件类型',
      '事件等级',
      '发生时间',
      '发生地点',
      '车牌号',
      '上报人',
      '处理状态'
    ],
    type: [
      'string',
      'string',
      'string',
      'string',
      'string',
      'string',
      'string',
      'string'
    ]
  }
  let service = { name: 'guanggu', layerId: 2 }
  // 提交验证
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      // 表单全部验证成功
      const res = await eventApi.putEventById(id, submitData)
      if (res.code == 0) {
        ElMessage({
          showClose: true,
          message: '事件审核失败!',
          type: 'error'
        })
      } else {
        dialogs.event.checking = false
        ElMessage({
          showClose: true,
          message: '事件审核成功!',
          type: 'success'
        })
        // 飞行视角
        map.value.getView().animate({
          center: position,
          zoom: 17,
          duration: 500
        })
        //添加事件点
        Point.add({
          position: position,
          fidValue: fidValue,
          fidNameAndType: fidNameAndType,
          service: service
        })
      }
    } else {
      // 表单全部验证失败
      return false
    }
  })
}
</script>
<style scoped></style>
